@import "../../../style/variable.scss";

@mixin stamp($color: $mainColor, $r: .064rem, $size: .18rem) {
    background: $color;
    background: linear-gradient(90deg, transparent $size, $color 0), radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) $r, $color $r) repeat-y;
    background-size: 110%, $size + .02 $size;
    background-position: $size / -2 0;
}

@mixin cart($time: .35s) {
    transition: width $time linear, top $time + .3 ease-in $time, left $time + .3 linear $time, transform $time + .3 ease-in $time;
}

.voucher{
    color: $textColor;
    height: 100vh;
    background: $bg;
}

.v-main{
    height: calc(100vh - 1rem);
    display: flex;
    flex-direction: column;
}

.stamp{
    @include stamp;
}
.stamp-gray{
    @include stamp($gray);
}
.stamp-red{
    @include stamp($red);
}

.ticket{
    margin: .2rem;
    position: relative;
    font-size: $baseFont - .08;
}
.tic-body{
    @include cart;
    display: flex;
    z-index: 1;
    overflow: hidden;
    min-height: 1.8rem;
    box-shadow: #d8d8d8 0 .2rem .1rem -0.1rem;
    border-radius: .08rem;
    &.move{
        left: .3rem;
        width: 100%;
        height: 1.4rem;
        bottom: 0;
        border: 3px solid white;
        opacity: .6;
        position: fixed;
        box-shadow: none;
        border-radius: 50%;
    }
    &.moving{
        left: calc(50% - .9rem);
        width: 1.8rem;
        transform: scale(.1);
    }
}
.using{
    color: $baseColor;
    width: 80%;
    margin: .1rem auto;
    padding: .3rem;
    background: white;
    .vu-qr{
        color: $mainColor;
        padding: .2rem 0;
        font-size: $baseFont + .1;
        justify-content: space-between;
    }
    .vu-sec{
        padding: .1rem 0;
    }
    .vu-gray{
        color: $deepColor;
    }
}
.tb-header{
    color: white;
    width: 1.9rem;
    display: flex;
    padding: .1rem .1rem .1rem .2rem;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-around;
}
.tbh-price{
    font-size: $baseFont + .06;
    align-self: flex-end;
    span{
        font-size: $baseFont + .46;
        margin-right: .1rem;
    }
}
.tic-right{
    flex: 1;
    background: white;
    > div{
        height: 100%;
        padding: .2rem;
        box-sizing: border-box;
    }
}
.tic-detail{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .tic-d-name{
        color: $baseColor;
        font-size: $baseFont - .06;
        align-self: flex-start;
    }
    .tic-expire{
        font-size: $baseFont + .02;
    }
    .tic-time{
        color: gray;
        font-size: $baseFont - .1;
    }
    .tic-d{
        display: inline-block;
        text-align: center;
        transition: transform .2s ease-in;
        &.open{
            transform: rotate(180deg);
        }
    }
}
.tic-cart{
    color: $mainColor;
    width: 1.6rem;
    text-align: center;
    border-left: 1px solid $borderColor;
    flex-direction: column;
    .tic-score{
        font-size: $baseFont - .14;
        margin-bottom: .06rem;
    }
    .tic-pic{
        width: .35rem;
        height: .35rem;
        margin: auto;
        padding: .05rem;
        background: #F1F1F1;
        box-sizing: border-box;
        border-radius: 50%;
    }
}
.tic-c-use{
    font-size: $baseFont + .08;
}
